<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="触发事件" id="btn">
    <input type="button" value="解绑" id="unbtn">

    <script>
        var btn = document.querySelector('#btn');
        // //on+事件名称（传统注册方式）
        //     //同一个元素，同一个事件，只能注册一个处理函数
        //     //注册多个，则最后一个起作用，其他被覆盖
        // btn.onclick=function(){
        //     alert('111');
        // }
        //解绑方式一
        btn.addEventListener('click', test);
        function test() {
            alert('null');
        }
        document.querySelector('#unbtn').onclick = function () {
            // btn.onclick=null;
            btn.removeEventListener('click', test);
        }
        // btn.onclick=function(){
        //     alert('222');
        // }


        // addEventListener（监听注册方式）可以给同一个元素、同一个事件注册多个处理函数
        // addEventListener('click',function(){
        //     alert('111')
        // },false);
        // addEventListener('click',function(){
        //     alert('222')
        // },false);


        //注册事件浏览器兼容问题
        // function addEventListener(element,type,callback,useCapture){
        //     //优先使用标准化支持的方式
        //     if(element.addEventListener){
        //         element.addEventListener(type,callback,useCapture);
        //     }else if(element.attacheEvent){
        //         element.attacheEvent('on'+type,callback);
        //     }else{
        //         element['on'+type]=callback;
        //     }
        // }


        //技术嗅探：判断浏览器是否支持该技术
        // var obj={
        //     text:function(){
        //         alert('ok')
        //     }
        // }
        // if(obj.text){
        //     obj.text();
        // }else{
        //     alert('无');
        // }
    </script>
</body>

</html>